<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="../../dist/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../dist/layui/css/formSelects-v4.css" />
		<link rel="stylesheet" type="text/css" href="../../dist/layui/css/time.css" />
		<style>
			.xm-select-title {
				width: 180px;
			}
              .xm-select-dl {
                width: 180px;
                
			}
			.xm-form-checkbox >i{
				display: none;
			}
			.xm-form-checkbox > span{
				padding-left: 0;
			}
			.xm-cz .icon-caidan{
				display: none;
			}
			.xm-select-parent{
                width: 180px;
                display: inline-block;
            }
            .xm-select-parent .xm-select{
                background: #373737;
            }
            
			
            
		</style>
	</head>
	<body>
		<div >
            <!-- 时间轴 -->
			<div class="timeX">
				<div class="timeX-left"  onclick="myFunction(event)"> <i class="layui-icon layui-icon-form" ></i> </div>
				<div class="timeX-tip">
					<p onclick="handleCut('years')">按照年</p>
					<p onclick="handleCut('month')">按照月</p>
				</div>
				<!-- 按照年 -->
				<div class="timeX-right years" id="years">
				</div>
				 <!-- 按照月 -->
				 <div class="timeX-right month">
					 <div id="month"></div>
					 <span onclick="handleSwitchMonth('prev')" class="arrow-left"><</span>
					 <span onclick="handleSwitchMonth('next')" class="arrow-right">></span>
				 </div>
             </div>
             <!-- 按钮 -->
             <div class="btnList">
                 <ul>
                    <li onclick="liveFn()">区域实况</li>
                    <li onclick="historyFn()">历史变化</li>
                    <li onclick="valueFn()">价值统计</li>    
                 </ul>
             </div>
             <div class="btnList-content-one">  
                <div class="layui-form">
                    <span>区域选择 &nbsp;</span>
                    <select name="city" xm-select="select1" xm-select-show-count = '2' >
                        <option value="1">老山</option>
                        <option value="2">蜜蜂</option>
                        <option value="3">东林</option>
                        <option value="4">太平</option>
                        <option value="5">北林</option>
                        <option value="6">中林</option>
                        <option value="7">跃进</option>
                        <option value="8">新垦</option>
                        <option value="9">老爷岭</option>
                        <option value="10">尖砬沟</option>
                    </select>
                </div>
                <div class="material">
                    <span>实物量</span>
                    <div id="webmap" style="width:400px;height:260px;"></div>
                </div>
                <div class="Quantity">
                    <span>价值量</span>
                    <div id="valuemap" style="width:400px;height:260px;"></div>
                </div>
             </div>
             <div class="btnList-content-two">
                    <span>区域选择 &nbsp;</span>
                    <select name="city" xm-select="select2" xm-select-show-count = '2' >
                        <option value="1" id='老山'>老山</option>
                        <option value="2">蜜蜂</option>
                        <option value="3">东林</option>
                        <option value="4">太平</option>
                        <option value="5">北林</option>
                        <option value="6">中林</option>
                        <option value="7">跃进</option>
                        <option value="8">新垦</option>
                        <option value="9">老爷岭</option>
                        <option value="10">尖砬沟</option>
                    </select>
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                          <li class="layui-this">实物量</li>
                          <li>价值量</li>
                        </ul>
                        <div class="layui-tab-content">
                             <div class="layui-tab-item layui-show">
                                <div id="historymap" style="width:400px;height:320px;"></div>
                             </div>
                             <div class="layui-tab-item">内容2</div>
                        </div>
                        
                      </div>    
             </div>
             <div class="btnList-content-three">
                03
             </div>
            
        </div>
        <script src="../../dist/layui/echarts.min.js"></script>
		<script src="../../dist/layui/jquery-3.5.0.js"></script>
		<script src="../../dist/layui/layui.js"></script>
        <script src="../../dist/layui/formSelects-v4.js"></script>
       
        <script type="text/javascript">
            //定义数组
            let arrLists = ['老山','蜜蜂','东林','太平','北林','中林']
             layui.use('element', function(){
                var element = layui.element;
            
            });
            
			layui.formSelects.btns('select1', ['select']);
			layui.formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
            //id:           点击select的id
            //vals:         当前select已选中的值
            //val:          当前select点击的值
            //isAdd:        当前操作选中or取消
            //isDisabled:   当前选项是否是disabled
            //alert("选择了: " + val.name);   
            console.log( vals,'第一次选中的') 
           
            console.log(val.name,'选择的城市')
        }, true);
          //ajax获取数据
          function getinitData(){
                // $.ajax({ 
                //     type: "POST",   
                //     url: "serverjson.php",
                //     data: {
                //         name: $("#staffName").val(), 
                //         number: $("#staffNumber").val(), 
                //         sex: $("#staffSex").val(), 
                //         job: $("#staffJob").val()
                //     },
                //     dataType: "json",
                //     success: function(data){
                //         if (data.success) { 
                //             $("#createResult").html(data.msg);
                //         } else {
                //             $("#createResult").html("出现错误：" + data.msg);
                //         }  
                //     },
                //     error: function(jqXHR){     
                //         alert("发生错误：" + jqXHR.status);  
                //     },     
                // });
          }
          //右侧按钮
          function liveFn(){
                $('.btnList-content-one').css('display','block')
                $('.btnList>ul>li:nth-child(1)').addClass('activei')
                $('.btnList>ul>li:nth-child(2)').removeClass('activei')
                $('.btnList>ul>li:nth-child(3)').removeClass('activei')
                $('.btnList-content-two').css('display','none')
                $('.btnList-content-three').css('display','none')
                getData()
                layui.formSelects.value('select1', []);
          }
          function historyFn(){
                $('.btnList-content-two').css('display','block')
                $('.btnList>ul>li:nth-child(2)').addClass('activei')
                $('.btnList>ul>li:nth-child(1)').removeClass('activei')
                $('.btnList>ul>li:nth-child(3)').removeClass('activei')
                $('.btnList-content-one').css('display','none')
                $('.btnList-content-three').css('display','none')
                getData2()
                layui.formSelects.value('select2', []);
              
          }
          function valueFn(){
                $('.btnList-content-three').css('display','block')
                $('.btnList>ul>li:nth-child(3)').addClass('activei')
                $('.btnList-content-one').css('display','none')
                $('.btnList-content-two').css('display','none')
                $('.btnList>ul>li:nth-child(1)').removeClass('activei')
                $('.btnList>ul>li:nth-child(2)').removeClass('activei')
          }
          //生成饼图
            function generateChart(data) {
                //基于准备好的DOM，初始化echarts实例
                var myChart = echarts.init(document.getElementById('webmap'));
                //指定图表的配置项和数据
                myChart.clear();
                var option = {
                    //提示框组件
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color:['#ff4e48','#FEC400','#58eaff','#8effcb','#64f897'],
                    legend: {
                        left: 'left',
                        padding:[20,0,0,15],
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 14,
                        },
                        data: data
                    },
                    
                    //系列列表。每个系列通过type决定自己的图表类型
                    series: [
                        {
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data//处理小数点数据
                        }
                    ]
                };
                //使用刚指定的配置项和数据显示图表
                myChart.setOption(option);

           }
           
            function getData() {
               let obj = [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ]
                let obj2 =[
                    5, 20, 36, 10, 10, 20
                ]
                let obj3= ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                generateChart(obj);
                generatevalue(obj2,obj3)
             }
             function getData2(){
                 let arr1 =  [
                        {
                            name: '2019-09',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '2019-10',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '2019-04',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '2019-07',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '201-03',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                ]
                generateLine(arr1)
             }
            //柱状图
            function generatevalue(data,data2) {
                //基于准备好的DOM，初始化echarts实例
                var myChart = echarts.init(document.getElementById('valuemap'));
                //指定图表的配置项和数据
                myChart.clear()
                var option = {
                    grid: {  
                        top: '10%',  
                        left: '0',  
                        containLabel: true  
                    } ,
                    xAxis: {
                        data: data2,
                        axisLine:{
                            lineStyle: {
                                color: '#fff',
                            }
                        }
                    },
                    yAxis: {
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            }
                        }

                    },
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: data
                    }]
                };
        
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
            //折线图
            function generateLine(data) {
                //基于准备好的DOM，初始化echarts实例
                var myChart = echarts.init(document.getElementById('historymap'));
                //指定图表的配置项和数据
                myChart.clear()
                option = {
                    
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:data,//提示文字
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                    grid: {
                        left: '0%',
                        bottom: '3%',
                        top:'25%',
                        containLabel: true
                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisLine:{
                            lineStyle: {
                                color: '#fff',
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine:{
                            lineStyle: {
                                color: '#fff',
                            }
                        }
                    },
                    series:data
                };
                
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
		  //伪造数据
		  var but=document.querySelector(".timeX-left");
             var tip=document.querySelector(".timeX-tip");
             var years = [{ t: "2019", v: 10 }, { t: "2020", v: 0 }]
             var month = [{ t: '2019-01', v: 0 }, { t: '2019-02', v: 0 }, { t: '2019-03', v: 0 }, { t: '2019-04', v: 0 }, { t: '2019-05', v: 0 }, { t: '2019-06', v: 20 }, { t: '2019-07', v: 30 }, { t: '2019-08', v: 80 }, { t: '2019-09', v: 90 }]
             var month_index = -1

             // 初始化年
             var cut = document.querySelectorAll('.timeX-tip p')
             cut[0].className = 'cur'
             updateHtml(years, 'years')


            //
            function myFunction(event){
                event.stopPropagation();
                tip.style.display = 'block'
            }
            //点击任何一处隐藏
            window.onclick = function(event){
                tip.style.display = "none"
            }
             //条件切换年月
             function handleCut(key){
                if(key === 'years'){
                    cut[1].className = ''
                    cut[0].className = 'cur'
                    document.querySelector('.month').style.display = 'none'
                    document.getElementById('years').style.display = 'block'
                    tip.style.display = 'none'
                    month_index = -1
                    updateHtml(years, key)
                }else{
                    cut[1].className = 'cur'
                    cut[0].className = ''
                    document.querySelector('.' + key).style.display = 'block'
                    document.getElementById('years').style.display = 'none'
                    tip.style.display = 'none'
                     month_index = 0
                    updateHtml(month, key)
                }
             }
             //切换月
             function handleSwitchMonth(key){
                 month_index = key === 'prev'? 0 : 1;
                 updateHtml(month, 'month')
             }

             //点击切换小圆圈获取v属性值
             function handleItem(e,year,month,v){
                 if(v){
                    //当前年份和v值
                    var new_year = month ? (year + '-' + (month < 10 ? '0' + month : month)) : (year + '');
                    getMapsAjax(new_year, v)
                    var item = document.querySelectorAll('.timeX-right li')
                    for (var i = 0; i < item.length; i++) {
                        if(item[i].className.indexOf('active') > -1){
                            item[i].className = ''
                        }
                    }
                    e.className = 'active'
                 }

             }
             //这里ajax请求
             function getMapsAjax(t,v){
                 console.log(t,v)
             }

            //渲染数据到页面
             function updateHtml(data, el){
                 var new_data = data
                 var html_str  = '<ul>'
                for(var i=0; i<new_data.length; i++){
                    html_str += '<li onclick="handleItem(this,'+ new_data[i].t.split('-')[0] +','+ new_data[i].t.split('-')[1] +','+ new_data[i].v +')"  class="'+ (new_data[i].v ? '' : 'disabled') +'"><div class="tip">'+ new_data[i].t +'</div></li>'
                }
                html_str += '</ul>'

                document.getElementById(el).innerHTML = html_str
             }
         </script>
        

		</script>
	
</html>


